<template>
  <div class="about">
    <!-- <user-info :id="id"></user-info> -->
    <!-- <h1>{{id}}</h1> -->
    <!-- {{ $route.params.id }} -->

    <!-- <router-link :to="{name:'home', params:{id:'2',username: 'erina'}}">当前页</router-link> -->

    <h1>{{ name }}-- {{ age }} -- {{ id }}  -- {{ username }}</h1>
    <h1>{{ route.params.id}}</h1>
    <h1>{{ route.fullPath }}</h1>
    <button @click="onLink">跳转</button>
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import {defineProps} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import UserInfo from '../components/UserInfo.vue';
// console.log("id:"+$route.params.id);
const props=defineProps(['name','age','id','username']);

const route = useRoute();
// console.log(route);
// const {id} = route.params;
console.log(route.params);

const router = useRouter();

// 路由跳转
// function onLink() {
//   router.push({ name: 'home', params: { username: 'erina' } });
// }

//组件守卫

</script>
